<template>
  <el-dialog append-to-body title="请选择上传" :visible.sync="visible" width="600px" :before-close="handleClose">
    <div>
      <el-form :model="form" :rules="rules" ref="form" class="white-card" label-width="80px">
        <el-form-item label="类型：" prop="fileTypeCode">
          <el-cascader v-model="form.fileTypeCode" :options="fileTypes" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="文件：" prop="file">
          <!--  v-slot:default="{ uploading }" -->
          <upload v-if="visible" show-type="element" @beforeUpload="beforeUpload" @success="onSuccess"></upload>
        </el-form-item>
      </el-form>
      <div class="split"></div>

      <div class="dialog-footer-btn">
        <el-button @click="handleClose" type="primary" plain>关闭</el-button>
        <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as mixins from "@/utils/mixins";
import upload from "@/components/upload";
import * as workOrderApi from "@/api/workOrder/index";

export default {
  name: "uploadFileTypeDialog",
  mixins: [mixins.dialog, mixins.form],
  components: { upload },
  props: ["workOrderId"],
  data() {
    return {
      submitting: false,
      uploading: false,
      form: {
        fileTypeCode: null,
        file: null,
      },
      rules: {
        fileTypeCode: [{ required: true, message: "请选择" }],
        file: [{ required: true, message: "请上传" }],
      },
      fileTypes: [
        {
          label: "受理阶段",
          value: 6,
          children: [
            { label: "投诉书", value: 15 },
            { label: "不予受理通知书", value: 32 },
            { label: "其他办案资料", value: 16 },
          ],
        },
      ],
    };
  },
  methods: {
    beforeUpload() {
      this.uploading = true;
    },
    onSuccess(file) {
      this.form.file = file;
      this.uploading = false;
    },
    handleSubmit() {
      console.log(this.$refs.upload, ".....");
      if (this.uploading) return this.$message.warning("文件正在上传中，请稍后提交");
      this.validateAndConfirm("form")
        .then(() => {
          const data = {
            attachmentList: [this.form.file],
            id: this.workOrderId,
            code: this.form.fileTypeCode[this.form.fileTypeCode.length - 1],
          };
          return workOrderApi.all.addAttachment(data);
        })
        .then(() => {
          this.$message.success("提交成功");
          this.handleClose();
          this.$emit("success");
        });
    },
  },
};
</script>

<style scoped></style>
